<template>
  <div class="container">

      <!-- 添加用户按钮和搜索框 -->
      <div class="search-container">
        <el-button type="primary" class="add-user-button" @click="showAddDialog">添加美发服务</el-button>
        <el-input v-model="searchKeyword" placeholder="搜索美发服务" clearable @keyup.enter.native="searchUsers" class="search-input"></el-input>
      </div>

    <!-- 使用 Element UI 的表格组件 -->
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="tid" label="技术编号"></el-table-column>
      <el-table-column prop="pid" label="项目类型"></el-table-column>
      <el-table-column prop="tname" label="技术名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="dodelete(scope.row.tid)">删除</el-button>
          <el-button type="text" size="small" @click="showUpdateDialog(scope.row.tid)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加美发" :visible.sync="addDialogVisible" width="50%" :before-close="closeDialog">
      <el-form ref="addForm" :model="technology" label-width="100px" class="form-container">
        <el-form-item label="技术编号">
          <el-input v-model="technology.tid" placeholder="请输入技术编号"></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-input v-model="technology.pid" placeholder="请输入项目类型"></el-input>
        </el-form-item>
        <el-form-item label="技术名称">
          <el-input v-model="technology.tname" placeholder="请输入技术名称"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dosave">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 修改用户对话框 -->
    <el-dialog title="修改技术" :visible.sync="updateDialogVisible" width="50%" :before-close="closeDialog">
      <el-form ref="updateForm" :model="technology" label-width="100px" class="form-container">
        <el-form-item label="技术编号">
          <el-input v-model="technology.tid" readonly></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-input v-model="technology.pid" placeholder="请输入项目类型"></el-input>
        </el-form-item>
        <el-form-item label="技术名称">
          <el-input v-model="technology.tname" placeholder="请输入技术名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doupdate">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 使用 Element UI 的分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagebean.total"
      :page-size="pagebean.pagesize"
      :current-page="pagebean.pagenow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';

export default {
  data() {
    return {
      technology: {},
      addDialogVisible: false, // 控制添加用户对话框的显示与隐藏
      updateDialogVisible: false, // 控制修改用户对话框的显示与隐藏
      pagebean: {
        total: 0,
        pagesize: 2,
        pagenow: 1,
        data: []
      },
      searchKeyword: '', // 存储搜索关键词
      filteredData: [] // 存储过滤后的数据
    };
  },
  created() {
    this.doload();
  },
  methods: {
    handleCurrentChange(val) {
      this.pagebean.pagenow = val;
      this.doload();
    },
    doload() {
      const that = this;
      this.$axios.get(`http://localhost:9990/technology-meifa/${this.pagebean.pagenow}/${this.pagebean.pagesize}`)
        .then(response => {
          that.pagebean = response.data;
          that.filteredData = response.data.data; //初始化过滤后的数据
        });
    },
    dodelete(tid) {
      const that = this;
      this.$axios.delete(`http://localhost:9990/technology-meifa/${tid}`)
        .then(() => {
          that.doload();
        });
    },
    dosave() {
      const that = this;
      this.$axios.post('http://localhost:9990/technology-meifa', qs.stringify(this.technology))
        .then(() => {
          that.doload();
          that.technology = {};
          that.addDialogVisible = false; // 关闭对话框
        });
    },
    dopreupdate(tid) {
      const that = this;
      this.$axios.get(`http://localhost:9990/technology-meifa/${tid}`)
        .then(response => {
          that.technology = response.data;
        });
    },
    doupdate() {
      const that = this;
      this.$axios.put('http://localhost:9990/technology-meifa', qs.stringify(this.technology))
        .then(() => {
          that.doload();
          that.technology = {};
          that.updateDialogVisible = false; // 关闭对话框
        });
    },
    showAddDialog() {
      this.technology = {}; // 清空表单
      this.addDialogVisible = true; // 显示对话框
    },
    showUpdateDialog(tid) {
      this.dopreupdate(tid);
      this.updateDialogVisible = true; // 显示修改对话框
    },
    searchUsers() {
      // 过滤数据
      this.filteredData = this.pagebean.data.filter(technology => {
        return (
          technology.tid.includes(this.searchKeyword) ||
          technology.pid.includes(this.searchKeyword) ||
          technology.tname.includes(this.searchKeyword)
        );
      });
    }
  }
};
</script>
<style scoped>
/* 添加用户按钮 */
.add-user-button {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  display: inline-flex; /* 改为 inline-flex */
  align-items: center; /* 居中对齐文本 */
  margin-right: 10px; /* 右侧间距 */
  margin-bottom: 20px;
}

/* 搜索框 */
.search-input {
  display: inline-block;
  width: 1030px; /* 调整宽度 */
  margin-bottom: 20px;
}

/* 搜索容器 */
.search-container {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 靠左对齐 */
  margin-bottom: 20px; /* 底部间距 */
}

/* 鼠标悬停时的效果 */
.add-user-button:hover {
  background-color: #409EFF; /* 更深一点的蓝色 */
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 按钮被激活时的效果 */
.add-user-button:active {
  background-color: #3A8EE6; /* 更深一点的蓝色 */
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.el-dialog__title {
  font-size: 18px;
  color: #303133;
}

.el-dialog__body {
  padding: 20px 20px 0;
}
/* 输入框样式 */
.el-input {
  width: 100%;
}



/* 对话框底部 */
.dialog-footer {
  text-align: right;

}

/* 输入框内部样式 */
.el-input__inner {
  font-size: 16px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 读只输入框样式 */
.el-input--is-disabled .el-input__inner {
  background-color: #f5f7fa;
  cursor: not-allowed;
  color: #c0c4cc;
}
</style>
